<template>
	<view class="container">
		<u-navbar
			:is-back="true"
			title="房间调控"
			:border-bottom="false"
			@back="goBack"
			:background="{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }"
			title-color="#ffffff"
		/>

		<!-- 当前状态显示 -->
		<view class="status-bar">
			<!-- <view class="status-item">
				<u-icon name="music-note" size="24" color="#4ecdc4"></u-icon>
				<text class="status-text">{{ isPlaying ? '播放中' : '已暂停' }}</text>
			</view> -->
			<view class="status-item">
				<u-icon name="volume-up" size="24" color="#ffa726"></u-icon>
				<text class="status-text">音量 {{ roomCtrl.volume }}%</text>
			</view>
			<view class="status-item">
				<u-icon name="star" size="24" color="#ffd700"></u-icon>
				<text class="status-text">{{ getLightModeName(currentLightMode) }}</text>
			</view>
		</view>

		<!-- 播放控制区 -->
		<view class="control-section">
			<view class="section-title">播放控制</view>
			<view class="play-controls">
				<!-- <view class="control-btn" @click="handlePlayPause">
					<u-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="60" color="#4ecdc4"></u-icon>
					<text class="control-text">{{ isPlaying ? '暂停' : '播放' }}</text>
				</view> -->
				<view class="control-btn" @click="handleNextSong">
					<u-icon name="arrow-right-double" size="60" color="#ff6b6b"></u-icon>
					<text class="control-text">切歌</text>
				</view>
				<view class="control-btn" @click="handleReplay">
					<u-icon name="reload" size="60" color="#ffa726"></u-icon>
					<text class="control-text">重唱</text>
				</view>
				<view class="control-btn" @click="handleVocalToggle">
					<u-icon name="mic" size="60" color="#9c27b0"></u-icon>
					<text class="control-text">原伴唱切换</text>
				</view>
			</view>
		</view>

		<!-- 音量控制 -->
		<view class="control-section">
			<view class="section-title">音量控制</view>
			<view class="volume-container">
				<view class="volume-btn" @click="handleVolumeDown">
					<u-icon name="minus-circle" size="40" color="#f9f9f9"></u-icon>
				</view>
				<view class="volume-slider">
					<u-slider v-model="roomCtrl.volume" min="0" max="100" active-color="#4ecdc4" @change="onVolumeChange" @changing="onVolumeChanging" />
					<text class="volume-text">{{ roomCtrl.volume }}%</text>
				</view>
				<view class="volume-btn" @click="handleVolumeUp">
					<u-icon name="plus-circle" size="40" color="#f9f9f9"></u-icon>
				</view>
			</view>

			<!-- 静音控制 -->
			<!-- <view class="mute-controls">
				<view class="control-btn-small" @click="handleMuteToggle">
					<u-icon :name="isMuted ? 'volume-off' : 'volume-up'" size="40" :color="isMuted ? '#ff6b6b' : '#4ecdc4'"></u-icon>
					<text class="control-text-small">{{ isMuted ? '取消静音' : '静音' }}</text>
				</view>
			</view> -->
		</view>

		<!-- 麦克风控制 -->
		<view class="control-section">
			<view class="section-title">麦克风控制</view>
			<view class="mic-controls">
				<view class="control-btn-small" @click="handleMicDown">
					<u-icon name="mic-off" size="40" color="#ff6b6b"></u-icon>
					<text class="control-text-small">麦克风-</text>
				</view>
				<view class="control-btn-small" @click="handleMicUp">
					<u-icon name="mic" size="40" color="#4ecdc4"></u-icon>
					<text class="control-text-small">麦克风+</text>
				</view>
			</view>
		</view>

		<!-- 灯光控制 -->
		<view class="control-section">
			<view class="section-title">灯光控制</view>
			<view class="light-controls">
				<view class="light-mode-grid">
					<view
						v-for="(mode, idx) in lightModes"
						:key="idx"
						:class="['light-mode-btn', { active: currentLightMode === mode.value }]"
						@click="handleLightMode(mode.value)"
					>
						<u-icon :name="mode.icon" size="32" :color="mode.color"></u-icon>
						<text class="mode-text">{{ mode.name }}</text>
					</view>
				</view>

				<!-- 灯光开关 -->
				<view class="light-switch">
					<view class="switch-item">
						<text class="switch-label">自动灯光</text>
						<u-switch v-model="roomCtrl.autoLight" active-color="#ffd700" @change="handleAutoLightToggle" />
					</view>
				</view>
			</view>
		</view>

		<!-- 音效控制 -->
		<view class="control-section">
			<view class="section-title">音效控制</view>
			<view class="sound-effects">
				<view
					v-for="(effect, idx) in soundEffects"
					:key="idx"
					:class="['effect-btn', { active: currentSoundEffect === effect.value }]"
					@click="handleSoundEffect(effect.value)"
				>
					<u-icon :name="effect.icon" size="28" :color="effect.color"></u-icon>
					<text class="effect-text">{{ effect.name }}</text>
				</view>
			</view>
		</view>

		<!-- 预设场景 -->
		<!-- <view class="control-section">
			<view class="section-title">预设场景</view>
			<view class="scene-controls">
				<view v-for="(scene, idx) in presetScenes" :key="idx" class="scene-btn" @click="handleApplyScene(scene.value)">
					<u-icon :name="scene.icon" size="32" :color="scene.color"></u-icon>
					<text class="scene-text">{{ scene.name }}</text>
				</view>
			</view>
		</view> -->

		<!-- 其他控制 -->
		<view class="control-section">
			<view class="section-title">其他功能</view>
			<view class="other-controls">
				<!-- <view class="control-btn-small" @click="handleScoreToggle">
					<u-icon name="star" size="40" :color="scoreEnabled ? '#ffd700' : '#666666'"></u-icon>
					<text class="control-text-small">{{ scoreEnabled ? '关闭评分' : '开启评分' }}</text>
				</view> -->
				<view class="control-btn-small" @click="handleCallService">
					<u-icon name="phone" size="40" color="#ff6b6b"></u-icon>
					<text class="control-text-small">呼叫服务</text>
				</view>
				<!-- <view class="control-btn-small" @click="showShutdownConfirm">
					<u-icon name="power" size="40" color="#ff4757"></u-icon>
					<text class="control-text-small">关机</text>
				</view> -->
			</view>
		</view>

		<!-- 操作历史 -->
		<view class="control-section" v-if="operationHistory.length > 0">
			<view class="section-title">操作记录</view>
			<view class="history-list">
				<view v-for="(record, idx) in operationHistory.slice(0, 5)" :key="idx" class="history-item">
					<view class="history-time">{{ formatTime(record.time) }}</view>
					<view class="history-action">{{ record.action }}</view>
					<view :class="['history-status', record.success ? 'success' : 'failed']">
						{{ record.success ? '成功' : '失败' }}
					</view>
				</view>
			</view>
		</view>

		<!-- 关机确认弹窗 -->
		<u-popup v-model="showShutdown" mode="center" border-radius="20" width="600rpx">
			<view class="shutdown-popup">
				<view class="shutdown-title">确认关机</view>
				<view class="shutdown-content">
					<text>确定要关闭KTV设备吗？关机后需要手动重启设备。</text>
				</view>
				<view class="shutdown-actions">
					<u-button type="default" @click="showShutdown = false">取消</u-button>
					<u-button type="error" @click="handleShutdown">确认关机</u-button>
				</view>
			</view>
		</u-popup>

		<!-- 场景应用确认弹窗 -->
		<u-popup v-model="showSceneConfirm" mode="center" border-radius="20" width="600rpx">
			<view class="scene-popup">
				<view class="scene-title">应用场景设置</view>
				<view class="scene-content">
					<text>确定要应用"{{ currentSceneName }}"场景吗？这将改变灯光、音效等多项设置。</text>
				</view>
				<view class="scene-actions">
					<u-button type="default" @click="showSceneConfirm = false">取消</u-button>
					<u-button type="primary" @click="confirmApplyScene">确认应用</u-button>
				</view>
			</view>
		</u-popup>

		<!-- 加载提示 -->
		<u-loading-page :loading="isLoading" :loading-text="loadingText"></u-loading-page>
	</view>
</template>

<script>
import ktvCommand from '@/common/ktv-command-utils.js';

export default {
	data() {
		return {
			orderId: '',
			isLoading: false,
			loadingText: '正在执行操作...',
			showShutdown: false,
			showSceneConfirm: false,
			currentSceneName: '',
			currentSceneValue: '',
			isPlaying: false,
			isMuted: false,
			scoreEnabled: false,
			currentLightMode: 'RH',
			currentSoundEffect: 'PRO',
			roomCtrl: {
				volume: 50,
				autoLight: false
			},
			operationHistory: [],
			volumeTimer: null,
			// 灯光模式配置
			lightModes: [
				{ name: '柔和', value: 'RH', icon: 'coupon', color: '#ffd700' },
				{ name: '动感', value: 'DG', icon: 'server-fill', color: '#ff6b6b' },
				{ name: '明亮', value: 'ML', icon: 'kefu-ermai', color: '#4ecdc4' },
				{ name: '柔情', value: 'RQ', icon: 'pushpin', color: '#ff69b4' },
				{ name: '全关', value: 'OFF', icon: 'close-circle', color: '#666666' },
				{ name: '全开', value: 'ON', icon: 'checkmark-circle', color: '#ffd700' },
				{ name: '商务', value: 'SW', icon: 'file-text', color: '#45b7d1' },
				{ name: '炫酷', value: 'XX', icon: 'grid', color: '#9c27b0' },
				{ name: '摇滚', value: 'YG', icon: 'man-delete', color: '#ff4757' },
				{ name: '浪漫', value: 'LM', icon: 'tags', color: '#ff69b4' },
				{ name: '清冽', value: 'QJ', icon: 'trash', color: '#00d2d3' }
			],
			// 音效配置
			soundEffects: [
				{ name: '专业', value: 'PRO', icon: 'chat', color: '#4ecdc4' },
				{ name: '流行', value: 'POP', icon: 'red-packet', color: '#ff6b6b' },
				{ name: '抒情', value: 'SOFT', icon: 'order', color: '#ff69b4' },
				{ name: '摇滚', value: 'ROCK', icon: 'man-delete', color: '#ff4757' },
				{ name: '会议', value: 'MEET', icon: 'photo', color: '#45b7d1' },
				{ name: '爵士', value: 'JZ', icon: 'lock', color: '#ffa726' }
			],
			// 预设场景
			presetScenes: [
				{ name: '浪漫', value: 'tags', icon: 'heart-fill', color: '#ff69b4' },
				{ name: '摇滚', value: 'man-delete', icon: 'zap', color: '#ff4757' },
				{ name: '商务', value: 'file-text', icon: 'briefcase', color: '#45b7d1' },
				{ name: '派对', value: 'party', icon: 'trash', color: '#ffa726' }
			],
			// 添加防抖控制
			lastCommandTime: 0,
			commandCooldown: 1000, // 1秒冷却时间
			disabledButtons: new Set() // 禁用的按钮集合
		};
	},
	onLoad(options) {
		this.orderId = options.order_id || '';
		this.loadRoomStatus();
	},
	onUnload() {
		// 清理定时器
		if (this.volumeTimer) {
			clearTimeout(this.volumeTimer);
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},

		// 添加操作记录
		addOperationRecord(action, success = true) {
			this.operationHistory.unshift({
				time: Date.now(),
				action,
				success
			});
			// 只保留最近20条记录
			if (this.operationHistory.length > 20) {
				this.operationHistory = this.operationHistory.slice(0, 20);
			}
		},

		// 格式化时间
		formatTime(timestamp) {
			const date = new Date(timestamp);
			return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
		},

		// 获取灯光模式名称
		getLightModeName(value) {
			const mode = this.lightModes.find((m) => m.value === value);
			return mode ? mode.name : '未知';
		},

		// 检查是否可以执行命令
		canExecuteCommand(commandType = 'default') {
			const now = Date.now();
			const timeSinceLastCommand = now - this.lastCommandTime;

			// 如果距离上次命令不足1秒，则不允许执行
			if (timeSinceLastCommand < this.commandCooldown) {
				const remainingTime = Math.ceil((this.commandCooldown - timeSinceLastCommand) / 1000);
				uni.showToast({
					title: `请等待${remainingTime}秒后再操作`,
					icon: 'none',
					duration: 1000
				});
				return false;
			}

			// 检查特定按钮是否被禁用
			if (this.disabledButtons.has(commandType)) {
				uni.showToast({
					title: '操作进行中，请稍候',
					icon: 'none'
				});
				return false;
			}

			return true;
		},

		// 执行命令前的准备
		prepareCommand(commandType = 'default') {
			this.lastCommandTime = Date.now();
			this.disabledButtons.add(commandType);

			// 1秒后移除禁用状态
			setTimeout(() => {
				this.disabledButtons.delete(commandType);
			}, this.commandCooldown);
		},

		// 显示冷却提示
		showCooldownToast() {
			const now = Date.now();
			const remainingTime = Math.ceil((this.commandCooldown - (now - this.lastCommandTime)) / 1000);
			uni.showToast({
				title: `操作冷却中，请等待${remainingTime}秒`,
				icon: 'none'
			});
		},

		// 播放/暂停
		async handlePlayPause() {
			if (!this.canExecuteCommand('playPause')) return;
			this.prepareCommand('playPause');

			this.loadingText = this.isPlaying ? '正在暂停...' : '正在播放...';
			const success = await ktvCommand.playPause(this.orderId);
			if (success) {
				this.isPlaying = !this.isPlaying;
				this.addOperationRecord(this.isPlaying ? '开始播放' : '暂停播放');
			} else {
				this.addOperationRecord(this.isPlaying ? '暂停失败' : '播放失败', false);
			}
		},

		// 切歌
		async handleNextSong() {
			if (!this.canExecuteCommand('nextSong')) return;

			uni.showModal({
				title: '确认切歌',
				content: '确定要切换到下一首歌曲吗？',
				success: async (res) => {
					if (res.confirm) {
						this.prepareCommand('nextSong');
						this.loadingText = '正在切歌...';
						const success = await ktvCommand.nextSong(this.orderId);
						if (success) {
							this.addOperationRecord('切歌');
						} else {
							this.addOperationRecord('切歌失败', false);
						}
					}
				}
			});
		},

		// 重唱
		async handleReplay() {
			if (!this.canExecuteCommand('replay')) return;
			this.prepareCommand('replay');

			this.loadingText = '正在重唱...';
			const success = await ktvCommand.replay(this.orderId);
			if (success) {
				this.addOperationRecord('重唱');
			} else {
				this.addOperationRecord('重唱失败', false);
			}
		},

		// 原伴唱切换
		async handleVocalToggle() {
			if (!this.canExecuteCommand('vocalToggle')) return;
			this.prepareCommand('vocalToggle');

			this.loadingText = '正在切换原伴唱...';
			const success = await ktvCommand.toggleVocalBackground(this.orderId);
			if (success) {
				this.addOperationRecord('切换原伴唱');
			} else {
				this.addOperationRecord('原伴唱切换失败', false);
			}
		},

		// 音量调节
		async handleVolumeUp() {
			if (!this.canExecuteCommand('volumeUp')) return;
			this.prepareCommand('volumeUp');

			const success = await ktvCommand.adjustVolume(this.orderId, true);
			if (success) {
				this.roomCtrl.volume = Math.min(100, this.roomCtrl.volume + 5);
				this.addOperationRecord('音量+');
			} else {
				this.addOperationRecord('音量调节失败', false);
			}
		},

		async handleVolumeDown() {
			if (!this.canExecuteCommand('volumeDown')) return;
			this.prepareCommand('volumeDown');

			const success = await ktvCommand.adjustVolume(this.orderId, false);
			if (success) {
				this.roomCtrl.volume = Math.max(0, this.roomCtrl.volume - 5);
				this.addOperationRecord('音量-');
			} else {
				this.addOperationRecord('音量调节失败', false);
			}
		},

		// 音量滑块变化（实时）
		onVolumeChanging(value) {
			// 实时更新显示，但不发送命令
			this.roomCtrl.volume = value;
		},

		// 音量滑块变化完成
		onVolumeChange(value) {
			// 防抖处理，避免频繁发送命令
			clearTimeout(this.volumeTimer);
			this.volumeTimer = setTimeout(async () => {
				// 这里可以发送具体音量设置命令（如果API支持）
				console.log('设置音量:', value);
				this.addOperationRecord(`设置音量${value}%`);
			}, 500);
		},

		// 静音切换
		async handleMuteToggle() {
			if (!this.canExecuteCommand('muteToggle')) return;
			this.prepareCommand('muteToggle');

			this.loadingText = this.isMuted ? '正在取消静音...' : '正在静音...';
			const success = this.isMuted ? await ktvCommand.unmute(this.orderId) : await ktvCommand.mute(this.orderId);

			if (success) {
				this.isMuted = !this.isMuted;
				this.addOperationRecord(this.isMuted ? '静音' : '取消静音');
			} else {
				this.addOperationRecord('静音操作失败', false);
			}
		},

		// 麦克风调节
		async handleMicUp() {
			if (!this.canExecuteCommand('micUp')) return;
			this.prepareCommand('micUp');

			const success = await ktvCommand.adjustMic(this.orderId, true);
			if (success) {
				this.addOperationRecord('麦克风+');
			} else {
				this.addOperationRecord('麦克风调节失败', false);
			}
		},

		async handleMicDown() {
			if (!this.canExecuteCommand('micDown')) return;
			this.prepareCommand('micDown');

			const success = await ktvCommand.adjustMic(this.orderId, false);
			if (success) {
				this.addOperationRecord('麦克风-');
			} else {
				this.addOperationRecord('麦克风调节失败', false);
			}
		},

		// 灯光模式设置
		async handleLightMode(mode) {
			if (!this.canExecuteCommand(`light_${mode}`)) return;
			this.prepareCommand(`light_${mode}`);

			this.loadingText = '正在设置灯光...';
			const success = await ktvCommand.controlLight(this.orderId, mode);
			if (success) {
				this.currentLightMode = mode;
				this.roomCtrl.autoLight = false;
				const modeName = this.getLightModeName(mode);
				this.addOperationRecord(`设置灯光: ${modeName}`);
			} else {
				this.addOperationRecord('灯光设置失败', false);
			}
		},

		// 自动灯光切换
		async handleAutoLightToggle(value) {
			if (!this.canExecuteCommand('autoLight')) return;
			this.prepareCommand('autoLight');

			const mode = value ? 'AUTO_ON' : 'AUTO_OFF';
			this.loadingText = value ? '正在开启自动灯光...' : '正在关闭自动灯光...';
			const success = await ktvCommand.controlLight(this.orderId, mode);
			if (success) {
				this.roomCtrl.autoLight = value;
				// this.currentLightMode = mode;
				this.addOperationRecord(value ? '开启自动灯光' : '关闭自动灯光');
			} else {
				this.addOperationRecord('自动灯光设置失败', false);
				// 恢复开关状态
				this.roomCtrl.autoLight = !value;
			}
		},

		// 音效设置
		async handleSoundEffect(effect) {
			if (!this.canExecuteCommand(`sound_${effect}`)) return;
			this.prepareCommand(`sound_${effect}`);

			this.loadingText = '正在设置音效...';
			const success = await ktvCommand.controlSoundEffect(this.orderId, effect);
			if (success) {
				this.currentSoundEffect = effect;
				const effectName = this.soundEffects.find((e) => e.value === effect)?.name || effect;
				this.addOperationRecord(`设置音效: ${effectName}`);
			} else {
				this.addOperationRecord('音效设置失败', false);
			}
		},

		// 评分切换
		async handleScoreToggle() {
			if (!this.canExecuteCommand('scoreToggle')) return;
			this.prepareCommand('scoreToggle');

			this.loadingText = this.scoreEnabled ? '正在关闭评分...' : '正在开启评分...';
			const success = await ktvCommand.toggleScore(this.orderId, !this.scoreEnabled);
			if (success) {
				this.scoreEnabled = !this.scoreEnabled;
				this.addOperationRecord(this.scoreEnabled ? '开启评分' : '关闭评分');
			} else {
				this.addOperationRecord('评分设置失败', false);
			}
		},

		// 呼叫服务
		async handleCallService() {
			if (!this.canExecuteCommand('callService')) return;
			this.prepareCommand('callService');

			this.loadingText = '正在呼叫服务...';
			const success = await ktvCommand.callService(this.orderId);
			if (success) {
				this.addOperationRecord('呼叫服务');
				uni.showToast({
					title: '服务员已收到呼叫',
					icon: 'success'
				});
			} else {
				this.addOperationRecord('呼叫服务失败', false);
			}
		},

		// 应用预设场景
		handleApplyScene(sceneValue) {
			const scene = this.presetScenes.find((s) => s.value === sceneValue);
			if (scene) {
				this.currentSceneName = scene.name;
				this.currentSceneValue = sceneValue;
				this.showSceneConfirm = true;
			}
		},

		// 确认应用场景
		async confirmApplyScene() {
			if (!this.canExecuteCommand(`scene_${this.currentSceneValue}`)) return;

			this.showSceneConfirm = false;
			this.prepareCommand(`scene_${this.currentSceneValue}`);
			this.loadingText = `正在应用${this.currentSceneName}场景...`;

			const success = await ktvCommand.applyScene(this.orderId, this.currentSceneValue);
			if (success) {
				this.addOperationRecord(`应用${this.currentSceneName}场景`);
				uni.showToast({
					title: `${this.currentSceneName}场景已应用`,
					icon: 'success'
				});
				this.updateSceneStatus(this.currentSceneValue);
			} else {
				this.addOperationRecord(`${this.currentSceneName}场景应用失败`, false);
			}
		},

		// 更新场景状态
		updateSceneStatus(sceneValue) {
			switch (sceneValue) {
				case 'romantic':
					this.currentLightMode = 'LM';
					this.currentSoundEffect = 'SOFT';
					break;
				case 'rock':
					this.currentLightMode = 'YG';
					this.currentSoundEffect = 'ROCK';
					break;
				case 'business':
					this.currentLightMode = 'SW';
					this.currentSoundEffect = 'MEET';
					break;
				case 'party':
					this.currentLightMode = 'DG';
					this.currentSoundEffect = 'POP';
					break;
			}
		},

		// 显示关机确认
		showShutdownConfirm() {
			this.showShutdown = true;
		},

		// 确认关机
		async handleShutdown() {
			if (!this.canExecuteCommand('shutdown')) return;

			this.showShutdown = false;
			this.prepareCommand('shutdown');
			this.loadingText = '正在关机...';
			const success = await ktvCommand.shutdown(this.orderId);
			if (success) {
				this.addOperationRecord('设备关机');
				uni.showModal({
					title: '关机成功',
					content: '设备已关机，请手动重启设备',
					showCancel: false,
					success: () => {
						uni.navigateBack();
					}
				});
			} else {
				this.addOperationRecord('关机失败', false);
			}
		},

		// 加载房间状态
		async loadRoomStatus() {
			try {
				// 这里可以加载房间当前状态
				// 由于没有对应的API，暂时使用默认值
				console.log('加载房间状态...');
			} catch (error) {
				console.error('加载房间状态失败:', error);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background: linear-gradient(180deg, #0d0d11 0%, #1a1a1f 100%);
	color: #ffffff;
	min-height: 100vh;
	padding-bottom: 40rpx;
}

.status-bar {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 20rpx;
	padding: 20rpx;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 15rpx;
	backdrop-filter: blur(10rpx);
}

.status-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.status-text {
	font-size: 24rpx;
	color: #ffffff;
}

.control-section {
	margin: 30rpx 20rpx;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 20rpx;
	padding: 30rpx;
	backdrop-filter: blur(10rpx);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 30rpx;
	text-align: center;
}

.play-controls {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.control-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15rpx;
	padding: 20rpx;
	border-radius: 15rpx;
	transition: all 0.3s;

	&:active {
		transform: scale(0.95);
		background: rgba(255, 255, 255, 0.1);
	}
}

.control-text {
	font-size: 24rpx;
	color: #ffffff;
}

.volume-container {
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.volume-btn {
	padding: 15rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	transition: all 0.3s;

	&:active {
		transform: scale(0.9);
		background: rgba(255, 255, 255, 0.2);
	}
}

.volume-slider {
	flex: 1;
	position: relative;
}

.volume-text {
	position: absolute;
	right: 0;
	top: -40rpx;
	font-size: 24rpx;
	color: #888888;
}

.mute-controls,
.mic-controls,
.other-controls {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.control-btn-small {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10rpx;
	padding: 15rpx;
	border-radius: 12rpx;
	transition: all 0.3s;

	&:active {
		transform: scale(0.95);
		background: rgba(255, 255, 255, 0.1);
	}
}

.control-text-small {
	font-size: 22rpx;
	color: #ffffff;
}

.light-mode-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15rpx;
	margin-bottom: 30rpx;
}

.light-mode-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	padding: 15rpx 10rpx;
	border-radius: 12rpx;
	background: rgba(255, 255, 255, 0.05);
	transition: all 0.3s;

	&.active {
		background: rgba(255, 255, 255, 0.15);
		transform: scale(1.05);
	}

	&:active {
		transform: scale(0.95);
	}
}

.mode-text {
	font-size: 20rpx;
	color: #ffffff;
}

.light-switch {
	border-top: 1rpx solid rgba(255, 255, 255, 0.1);
	padding-top: 20rpx;
}

.switch-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.switch-label {
	font-size: 28rpx;
	color: #ffffff;
}

.sound-effects {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
	justify-content: space-around;
}

.effect-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	padding: 15rpx 20rpx;
	border-radius: 12rpx;
	background: rgba(255, 255, 255, 0.05);
	transition: all 0.3s;
	min-width: 120rpx;

	&.active {
		background: rgba(255, 255, 255, 0.15);
		transform: scale(1.05);
	}

	&:active {
		transform: scale(0.95);
	}
}

.effect-text {
	font-size: 22rpx;
	color: #ffffff;
}

.scene-controls {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.scene-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10rpx;
	padding: 20rpx 15rpx;
	border-radius: 15rpx;
	background: rgba(255, 255, 255, 0.05);
	transition: all 0.3s;

	&:active {
		transform: scale(0.95);
		background: rgba(255, 255, 255, 0.15);
	}
}

.scene-text {
	font-size: 22rpx;
	color: #ffffff;
}

.history-list {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.history-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15rpx 20rpx;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12rpx;
}

.history-time {
	font-size: 22rpx;
	color: #888888;
}

.history-action {
	font-size: 24rpx;
	color: #ffffff;
	flex: 1;
	text-align: center;
}

.history-status {
	font-size: 22rpx;
	padding: 4rpx 8rpx;
	border-radius: 8rpx;

	&.success {
		color: #4ecdc4;
		background: rgba(78, 205, 196, 0.1);
	}

	&.failed {
		color: #ff6b6b;
		background: rgba(255, 107, 107, 0.1);
	}
}

.shutdown-popup,
.scene-popup {
	padding: 40rpx;
	background: #23232b;
	border-radius: 20rpx;
	text-align: center;
}

.shutdown-title,
.scene-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 20rpx;
}

.shutdown-content,
.scene-content {
	margin-bottom: 30rpx;
}

.shutdown-content text,
.scene-content text {
	font-size: 28rpx;
	color: #cccccc;
}

.shutdown-actions,
.scene-actions {
	display: flex;
	gap: 20rpx;
	justify-content: center;
}
</style>
